<template>
	<div class="result-container">
		<!-- 加载状态 -->
		<div v-if="status === 'loading'" class="loading-icon">
			<svg viewBox="0 0 52 52">
				<circle cx="26" cy="26" r="25" fill="none" />
			</svg>
		</div>

		<!-- 成功状态 -->
		<div v-if="status === 'success'" class="success-icon">
			<svg viewBox="0 0 52 52">
				<circle cx="26" cy="26" r="25" fill="none" />
				<path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
			</svg>
		</div>

		<!-- 失败状态 -->
		<div v-if="status === 'error'" class="error-icon">
			<svg viewBox="0 0 52 52">
				<circle cx="26" cy="26" r="25" fill="none" />
				<path fill="none" d="M16 16l20 20 M36 16l-20 20" />
			</svg>
		</div>

		<h2>{{ title }}</h2>
		<p>{{ message }}</p>

		<!-- 调试信息 -->
		<div v-if="debug" class="debug-info">
			<p>Code: {{ code }}</p>
			<p>State: {{ state }}</p>
			<p v-if="errorMsg">Error: {{ errorMsg }}</p>
		</div>
	</div>
</template>

<script setup>
	import { useRoute } from 'vue-router'
	import wechatAuthApi from '@/api/auth/wechatAuthApi'

	const route = useRoute()
	const code = route.query.code
	const state = route.query.state

	const status = ref('loading')
	const title = ref('正在验证...')
	const message = ref('请稍候...')
	const errorMsg = ref('')
	const debug = ref(import.meta.env.MODE === 'development')

	onMounted(async () => {
		try {
			wechatAuthApi
				.doLogin(code, state)
				.then((res) => {
					status.value = 'success'
					title.value = '登录成功'
					message.value = '扫码验证已完成'
				})
				.catch((error) => {
					status.value = 'error'
					title.value = '验证失败'
					message.value = error.msg
				})
		} catch (err) {
			status.value = 'error'
			title.value = '验证失败'
			message.value = '请重试或联系产品技术部'
			errorMsg.value = err.message
		}
	})
</script>

<style scoped>
	.result-container {
		text-align: center;
		padding: 30px;
		margin: 0;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.loading-icon,
	.success-icon,
	.error-icon {
		width: 80px;
		height: 80px;
		margin: 0 auto 20px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading-icon {
		background-color: #2196f3;
	}

	.success-icon {
		background-color: #4caf50;
	}

	.error-icon {
		background-color: #f44336;
	}

	.loading-icon svg,
	.success-icon svg,
	.error-icon svg {
		width: 50px;
		height: 50px;
	}

	.loading-icon circle {
		stroke: white;
		stroke-width: 2;
		stroke-dasharray: 157;
		animation: loading-rotate 1.4s linear infinite;
	}

	.success-icon circle,
	.error-icon circle {
		stroke: white;
		stroke-width: 2;
		animation: circle-animation 0.6s ease-in-out;
	}

	.success-icon path,
	.error-icon path {
		stroke: white;
		stroke-width: 4;
		stroke-dasharray: 48;
		stroke-dashoffset: 48;
		animation: check-animation 0.3s 0.3s ease-in-out forwards;
	}

	@keyframes loading-rotate {
		to {
			transform: rotate(1turn);
		}
	}

	@keyframes circle-animation {
		from {
			stroke-dasharray: 0 157;
		}
		to {
			stroke-dasharray: 157 157;
		}
	}

	@keyframes check-animation {
		from {
			stroke-dashoffset: 48;
		}
		to {
			stroke-dashoffset: 0;
		}
	}

	h2 {
		color: #333;
		margin-bottom: 10px;
	}

	p {
		color: #666;
		margin-bottom: 30px;
	}

	.debug-info {
		margin-top: 20px;
		color: #999;
		font-size: 14px;
	}
</style>
